<template>
  <div class="login_box">
    <el-form class="formBox" ref="ruleFormRef" :model="ruleForm" :rules="rules">
      <h3 class="loginTitle">后台管理系统</h3>
      <el-form-item label prop="userName">
        <el-input v-model="ruleForm.userName" clearable>
          <template #prefix>
            <el-icon :size="16" color="#03a9f4">
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          clearable
          show-password
          @keyup.enter.native="handLogin(ruleFormRef)"
        >
          <template #prefix>
            <el-icon :size="16" color="#03a9f4">
              <Unlock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          class="login_btn"
          type="primary"
          style="width: 100%"
          plain
          round
          :loading="loading"
          @click="handLogin(ruleFormRef)"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/index.js";
const router = useRouter(); //路由对象
const ruleForm = reactive({
  userName: "admin",
  password: "admin"
});
// 校验规则
const rules = reactive({
  userName: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur"
    }
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur"
    },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
  ]
});
const ruleFormRef = ref(null);
// 按钮loading
const loading = ref(false);
//登录
const handLogin = formEl => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (valid) {
      // 登录按钮loading
      loading.value = true;
      try {
        // 调用piain的登录方法
        const res = await useUserStore().login(ruleForm);
        ElMessage.success("登录成功" + "," + getTime());
        router.push("/");
        loading.value = false;
      } catch (error) {
        setTimeout(() => {
          loading.value = false;
        }, 1000);
        ElMessage.error(error.message);
      }
    } else {
      console.log("校验失败");
    }
  });
};
//获取当前时段
const getTime = function() {
  let msg = "";
  let hours = new Date().getHours();
  if (hours <= 9) {
    msg = "早上好!";
  } else if (hours <= 12) {
    msg = "上午好!";
  } else if (hours <= 18) {
    msg = "下午好";
  } else {
    msg = "晚上好";
  }
  return msg;
};
</script>

<style scoped lang="scss">
.login_box {
  width: 100%;
  height: 100vh;
  background: rgb(155, 214, 237);
}
.formBox {
  width: 400px;
  height: 260px;
  border: 2px solid #03a9f4;
  text-align: center;
  padding: 20px;
  position: relative;
  left: calc(50% - 200px);
  top: calc(50% - 130px);
  border-radius: 8px;
  :deep(.el-input__wrapper) {
    border: 1px solid #03a9f4;
  }
}

.loginTitle {
  color: #03a9f4;
  font-size: 24px;
  padding: 5px 0;
}
</style>